<script setup>
    import { ref, shallowRef } from 'vue'

    const luckyNumber = ref({
        front: [],
        back: []
    })
    const numberData = ref({
        front: generateNumbers(35),
        back: generateNumbers(12),
    })
    const removeData = ref({
        front: [],
        back: []
    })
    const mode = ref(1) // 1纯随机 2半随机

    // 从数组中随机选取N个不重复值
    function selectRandomNumbers(arr, n) {
        if (n > arr.length) {
            throw new Error("选择数量不能大于数组长度")
        }

        const selected = new Set()
        const arrCopy = [...arr]

        while (selected.size < n) {
            const randomIndex = Math.floor(Math.random() * arrCopy.length)
            selected.add(arrCopy[randomIndex])
            arrCopy.splice(randomIndex, 1)
        }
        
        return [...selected]
    }

    // 生成指定长度数组
    function generateNumbers(length) {
        return Array.from({ length }, (_, k) => (k + 1).toString().padStart(2,'0'))
    }

    // 重置
    const reset = () => {
        luckyNumber.value = {
            front: [],
            back: []
        }
        removeData.value = {
            front: [],
            back: []
        }
        numberData.value = {
            front: generateNumbers(35),
            back: generateNumbers(12),
        }
        mode.value = 1
    }

    // 模式选择
    const modeChange = (e) => {
        reset()
        removeData.value = {
            front: [],
            back: []
        }

        mode.value = e.target.value
        if(e.target.value == 2) {
            alert('半随机模式下，可以手动选择不要的数字')
        }
    }

    // 选号 numberData
    const selectNumber = (item,type) => {
        if(mode.value == 2) {
            removeData.value[type].push(item)
            numberData.value[type] = numberData.value[type].filter(num => num !== item)
            return
        }
        luckyNumber.value[type] = luckyNumber.value[type].includes(item) 
                                    ? luckyNumber.value[type].filter(i => i !== item).slice(0, type == 'front' ? 5 : 2) 
                                    : [...luckyNumber.value[type],item].slice(0, type == 'front' ? 5 : 2)
    }

    // 复制号码
    const copyText = () => {
        const textToCopy = [...luckyNumber.value.front, '', '', ...luckyNumber.value.back].join(' ')
        if (navigator.clipboard) {
            navigator.clipboard.writeText(textToCopy)
            .then(() => alert('复制成功！'))
            .catch(() => alert('复制失败'))
        } else {
            const textarea = document.createElement('textarea')
            textarea.value = textToCopy
            document.body.appendChild(textarea)
            textarea.select()
            try {
                document.execCommand('copy')
                alert('复制成功！')
            } catch (err) {
                alert('复制失败')
            } finally {
                document.body.removeChild(textarea)
            }
        }
    }

    // 随机选号
    const randomNumber = () => {
        // 前区
        const frontPool = mode.value == 2 
                            ? numberData.value.front.filter(num => !removeData.value.front.includes(num)) 
                            : numberData.value.front
        // 后区
        const backPool = mode.value == 2 
                            ? numberData.value.back.filter(num => !removeData.value.back.includes(num)) 
                            : numberData.value.back

        luckyNumber.value = {
            front: selectRandomNumbers(frontPool, 5),
            back: selectRandomNumbers(backPool, 2)
        }
    }
</script>

<template>
    <div class="lucky-page" >
        <div>选号面板（前区5个 后区2个） </div>
        <div>
            <!-- 操作 -->
            <div class="flex flex-c-style operation">
                <div class="flex flex-c-style pointer" >
                    <span>模式：</span>
                    <select @change="modeChange" >
                        <option value="1" :selected="mode == 1">纯随机</option>
                        <option value="2" :selected="mode == 2">半随机(可以手动剔除某些不想要的数字)</option>
                    </select>
                </div>
                <button @click="reset">重置</button>
                <div class="flex flex-c-style pointer" @click="randomNumber">
                    <img class="random-icon" src="@/assets/images/random.png" alt="">
                    <button>神来一手</button>
                </div>
            </div>
            <!-- 剔除数字面板 -->
            <div class="flex remove-box" v-if="mode == 2" >
                当前剔除数字：
                <div class="remove-front" >
                    <span v-for="item in removeData.front" :key="item" class="flex flex-c-style num-item f-selected" >{{ item }}</span>
                </div>
                <div class="remove-back" style="margin-left: 20px;" >
                    <span v-for="item in removeData.back" :key="item" class="flex flex-c-style num-item b-selected" >{{ item }}</span>
                </div>
            </div>
            <!-- 数字面板 -->
            <div class="area front-area">
                <span 
                    v-for="item in numberData.front" 
                    :key="item"
                    class="flex flex-c-style num-item pointer"
                    :class="{'f-selected': luckyNumber.front.includes(item) }"
                    @click="selectNumber(item,'front')">
                    {{item}}
                </span>
            </div>
            <div class="line" ></div>
            <div class="area back-area">
                <span 
                    v-for="item in numberData.back" 
                    :key="item"
                    class="flex flex-c-style num-item pointer"
                    :class="{'b-selected': luckyNumber.back.includes(item) }"
                    @click="selectNumber(item,'back')">
                    {{item}}
                </span>
            </div>
        </div>
        <!-- 已选 -->
        <div class="flex result" >
            <span>已选号码：</span>
            <span 
                v-for="item in luckyNumber.front" 
                :key="item"
                class="flex flex-c-style num-item pointer selected-front">
                {{item}}
            </span>
            <span class="placeholder" ></span>
            <span 
                v-for="item in luckyNumber.back" 
                :key="item"
                class="flex flex-c-style num-item pointer selected-back">
                {{item}}
            </span>
            <button class="copy" @click="copyText" 
                v-if="luckyNumber.front.length || luckyNumber.back.length">
                复制号码
            </button>    
        </div>
    </div>
</template>

<style lang="less" scoped>
.flex{
    display: flex;
    align-items: center;
}
.flex-c-style {
    justify-content: center;
}
.pointer{
    cursor: pointer;
}
.lucky-page{
    text-align: center;
    height: 100%;
    padding: 20px;
    .operation{
        padding: 20px 0;
        gap: 30px;
    }
    .remove-box{
        padding-bottom: 30px;
        text-align: left;
    }
    .random-icon{
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .line{
        height: 1px;
        background: #eee;
        margin: 20px 0;
    }
    .num-item{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #eee;
        font-size: 16px;
        font-weight: 600;
    }
    .remove-front, .remove-back{
        display: flex;
        gap: 10px;
    }
    .f-selected{
        color: #fff;
        background: url('@/assets/images/f.webp') no-repeat center;
    }
    .b-selected{
        color: #000;
        background: url('@/assets/images/b.webp') no-repeat center;
    }
    .area{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 10px;
    }
    .result{
        padding-top: 30px;
        height: 80px;
        .copy{
            margin-left: 10px;
        }
        .placeholder{
            width: 30px;
        }
        .selected-front{
            margin-right: 5px;
            color: #fff;
            background: url('@/assets/images/f.webp') no-repeat center;
            &:nth-last-child(1){
                margin-right: 0;
            }
        }
        .selected-back{
            margin-right: 5px;
            color: #000;
            background: url('@/assets/images/b.webp') no-repeat center;
            &:nth-last-child(1){
                margin-right: 0;
            }
        }
    }
}
</style>
